<template>
  <div class="mod-home">
    <div
      style="
        font-size: 25px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div>小程序用户数据</div>
      <div>
        <el-space>
          <el-radio-group v-model="spanType">
            <el-radio label="0">周</el-radio>
            <el-radio label="1">月</el-radio>
            <el-radio label="2">年</el-radio>
          </el-radio-group>
          <el-date-picker
            value-format="timestamp"
            format="yyyy-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            v-model="dateRange"
            type="daterange"
          ></el-date-picker>
          <el-button @click="handleQuery" type="primary">查询</el-button>
        </el-space>
      </div>
    </div>
    <div class="topInfo">
      <div class="item">
        <div class="icon-position">
          <icon-svg name="duanxin" class="icon-style"></icon-svg>
        </div>

        <div style="display: flex; align-items: center; flex-direction: column">
          <span>小程序使用人数</span>
          <p>{{ this.miniUse }}人</p>
        </div>
      </div>
      <div class="item">
        <div class="icon-position">
          <icon-svg name="shoucang" class="icon-style"></icon-svg>
        </div>

        <div style="display: flex; align-items: center; flex-direction: column">
          <span>小程序关注人数</span>
          <p>{{ this.miniAttention }}人</p>
        </div>
      </div>
      <div class="item">
        <div class="icon-position">
          <icon-svg name="geren" class="icon-style"></icon-svg>
        </div>

        <div style="display: flex; align-items: center; flex-direction: column">
          <span>维修人员人数</span>
          <p>{{ repairmanNum }}人</p>
        </div>
      </div>
    </div>

    <div
      style="
        font-size: 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
      "
    >
      <div>业务信息</div>
      <el-radio-group v-model="queryType">
        <el-radio label="0">审批状态</el-radio>
        <el-radio label="1">业务类型</el-radio>
      </el-radio-group>
    </div>
    <div class="workInfo">
      <div id="workTypeInfo">左侧饼图</div>
      <div id="workNumber"></div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data() {
    return {
      loginUser: {},
      workTypeInfo: [],
      workNumberInfo: {},
      repairmanNum: null,
      miniUse: null,
      miniAttention: null,
      chartPie: null,
      chartBar: null,
      dateArr: [],
      dateRange: [],
      list1: [], // 拒绝工单
      list2: [], // 完成工单
      list3: [], // 等待处理
      list5: [], // 等待维修
      list6: [], // 维修工单结束
      list4: [], // 维修处理异常
      list7: [], // 维修处理异常
      spanType: '0',
      queryType: '0',
      legend: [],
      series: []
    }
  },
  activated() {
    if (this.chartBar) {
      this.chartBar.resize()
    }
    if (this.chartPie) {
      this.chartPie.resize()
    }
  },
  watch: {
    queryType(val) {
      this.list1 = []
      this.list2 = []
      this.list3 = []
      this.list4 = []
      this.list5 = []
      this.list6 = []
      this.list7 = []
      if (val === '1') {
        this.getWorkNewData2()
      } else {
        this.getWorkNewData()
      }
      console.log(val)
    },
    spanType() {
      this.getWorkNewData()
      this.getMiniInfo()
    }
  },
  methods: {
    handleQuery() {
      this.getWorkNewData()
      this.getMiniInfo()
    },
    getLoginUser() {
      this.$http({
        url: this.$http.adornUrl(`sys/user/info/${this.$store.state.user.id}`),
        method: 'get'
      }).then(({ data }) => {
        this.loginUser = data.user
      })
    },
    // 柱状图
    initChartBar() {
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          right: '5%', // 工具栏组件距离容器右侧的距离
          top: '5%', // 工具栏组件距离容器顶部的距离
          bottom: '10%',
          feature: {
            saveAsImage: {},
            restore: {},
            dataView: {},
            magicType: { type: ['line', 'bar'] }
          }
        },
        legend: {
          data: this.legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.dateArr
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: this.series
      }
      if (this.chartBar) {
        this.chartBar.clear()
      } else {
        this.chartBar = echarts.init(document.getElementById('workNumber'))
      }
      this.chartBar.setOption(option)

      console.log(option)
      window.addEventListener('resize', () => {
        this.chartBar.resize()
      })
    },
    // 饼状图
    initChartPie() {
      var option = {
        backgroundColor: '#fff',
        title: {
          text: '业务状态',
          left: 'center',
          top: 20,
          textStyle: {
            color: '#437f4f'
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        color: [
          '#fc8251',
          '#5470c6',
          '#ef6567',
          '#3BA272',
          '#9A60B4',
          '#f9c956'
        ],
        grid: {},
        series: [
          {
            name: '各状态业务数量',
            type: 'pie',
            radius: '40%',
            center: ['50%', '50%'],
            data: this.workTypeInfo,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      this.chartPie = echarts.init(document.getElementById('workTypeInfo'))
      this.chartPie.setOption(option)
      window.addEventListener('resize', () => {
        this.chartPie.resize()
      })
    },
    // 获取饼图数据
    getPieList() {
      this.$http({
        url: this.$http.adornUrl('sys/maintenance/data/getRepairmanList'),
        method: 'post',
        params: {
          page: 1,
          size: 100000
        },
        data: this.$http.adornData()
      }).then(({ data }) => {
        const typeInfo = data.data.status
        typeInfo.forEach((item) => {
          if (item.audit_status === -1) {
            this.workTypeInfo.push({ value: item.cnt, name: '审批失败' })
          } else if (item.audit_status === 0) {
            this.workTypeInfo.push({ value: item.cnt, name: '等待审批' })
          } else if (item.audit_status === 1) {
            this.workTypeInfo.push({ value: item.cnt, name: '审批完成' })
          } else if (item.audit_status === 2) {
            this.workTypeInfo.push({ value: item.cnt, name: '处理完成' })
          } else {
            this.workTypeInfo.push({ value: item.cnt, name: '等待处理' })
          }
        })
        this.initChartPie()
      })
    },
    // 获取小程序用户信息
    getMiniInfo() {
      this.$http({
        url: this.$http.adornUrl('sys/statistics/queryUsersQuantity'),
        method: 'get',
        params: {
          spanType: this.spanType,
          startTime: this.dateRange ? this.dateRange[0] : '',
          endTime: this.dateRange ? this.dateRange[1] : ''
        }
      }).then(({ data }) => {
        // console.log(data)
        this.miniUse = data.data.useCntAll
        this.miniAttention = data.data.attCntAll
        this.repairmanNum = data.data.repCntAll
      })
    },

    // 获取近工单信息的数据
    getWorkNewData() {
      this.$http({
        url: this.$http.adornUrl('sys/statistics/queryWorksheetsInfo'),
        params: {
          spanType: this.spanType,
          queryType: this.queryType,
          startTime: this.dateRange ? this.dateRange[0] : '',
          endTime: this.dateRange ? this.dateRange[1] : ''
        }
      }).then(({ data }) => {
        if (data.code === 1) {
          const worksheetCntRight = data.data.d
          const worksheetCntLeft = data.data.worksheetCntLeft

          this.dateArr = worksheetCntRight.map((el) => el.x)
          this.dateArr = Array.from(new Set(this.dateArr))
          this.list1 = worksheetCntRight.map((el) => el['等待处理'])

          this.list2 = worksheetCntRight.map((el) => el['审批完成'])

          this.list3 = worksheetCntRight.map((el) => el['处理完成'])

          this.list4 = worksheetCntRight.map((el) => el['等待维修'])

          this.list5 = worksheetCntRight.map((el) => el['维修业务结束'])
          this.list6 = worksheetCntRight.map((el) => el['审核失败'])
          this.list7 = worksheetCntRight.map((el) => el['维修处理异常'])
          this.legend = [
            '等待处理',
            '审批完成',
            '处理完成',
            '等待维修',
            '维修业务结束',
            '审核失败',
            '维修处理异常'
          ]
          this.series = [
            {
              name: '等待处理',
              type: 'bar',
              data: this.list1
            },
            {
              name: '审批完成',
              type: 'bar',
              data: this.list2
            },
            {
              name: '处理完成',
              type: 'bar',
              data: this.list3
            },
            {
              name: '等待维修',
              type: 'bar',
              data: this.list4
            },
            {
              name: '维修业务结束',
              type: 'bar',
              data: this.list5
            },
            {
              name: '审核失败',
              type: 'bar',
              data: this.list6
            },
            {
              name: '维修处理异常',
              type: 'bar',
              data: this.list6
            }
          ]

          this.workTypeInfo = worksheetCntLeft.map((el) => {
            return {
              value: el.cnt,
              name: el.type
            }
          })
          this.initChartBar()
          this.initChartPie()
        }
      })
    },

    // 获取近工单信息的数据
    getWorkNewData2() {
      this.$http({
        url: this.$http.adornUrl('sys/statistics/queryWorksheetsInfo'),
        params: {
          spanType: this.spanType,
          queryType: this.queryType,
          startTime: this.dateRange ? this.dateRange[0] : '',
          endTime: this.dateRange ? this.dateRange[1] : ''
        }
      }).then(({ data }) => {
        if (data.code === 1) {
          const worksheetCntRight = data.data.d
          const worksheetCntLeft = data.data.worksheetCntLeft
          this.dateArr = worksheetCntRight.map((el) => el.x)
          this.dateArr = Array.from(new Set(this.dateArr))
          this.list1 = worksheetCntRight.map((el) => el['VPN申请'])

          this.list2 = worksheetCntRight.map((el) => el['公章申请'])

          this.list3 = worksheetCntRight.map((el) => el['资源申请'])

          this.list4 = worksheetCntRight.map((el) => el['电子邮箱申请'])

          this.list5 = worksheetCntRight.map((el) => el['维修申请'])
          this.list6 = worksheetCntRight.map((el) => el['网络故障'])
          this.list7 = worksheetCntRight.map((el) => el['软件故障'])
          this.legend = [
            'VPN申请',
            '公章申请',
            '资源申请',
            '电子邮箱申请',
            '维修申请',
            '网络故障',
            '软件故障'
          ]
          this.series = [
            {
              name: 'VPN申请',
              type: 'bar',
              data: this.list1
            },
            {
              name: '公章申请',
              type: 'bar',
              data: this.list2
            },
            {
              name: '资源申请',
              type: 'bar',
              data: this.list3
            },
            {
              name: '电子邮箱申请',
              type: 'bar',
              data: this.list4
            },
            {
              name: '维修申请',
              type: 'bar',
              data: this.list5
            },
            {
              name: '网络故障',
              type: 'bar',
              data: this.list6
            },
            {
              name: '软件故障',
              type: 'bar',
              data: this.list7
            }
          ]
          this.workTypeInfo = worksheetCntLeft.map((el) => {
            return {
              value: el.cnt,
              name: el.type
            }
          })
          this.initChartBar()
          this.initChartPie()
        }
      })
    }
  },
  created() {
    this.getWorkNewData()
    this.getLoginUser()
    this.getMiniInfo()
  },
  mounted() {
    this.initChartBar()
    this.initChartPie()
  }
}
</script>

<style lang="scss" scoped>
.topInfo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 250px;
  .item {
    display: flex;
    align-items: center;
    width: 30%;
    margin: auto;
    font-size: 20px;
    height: 80%;
    background-color: #c18cf8;
    color: #fff;
    border-radius: 10px;
  }
  .item:nth-child(2) {
    background-color: #6982e6;
    .icon-position {
      background-color: #bbcff2;
      .icon-style {
        color: #6994e4;
      }
    }
  }
  .item:nth-child(3) {
    background-color: #fea08b;
    .icon-position {
      background-color: #fedbc8;
      .icon-style {
        color: #fead86;
      }
    }
  }

  .icon-position {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2c9fb;
    border-radius: 50%;
    margin: 0 20px;
    width: 100px;
    height: 100px;
    .icon-style {
      font-size: 70px;
    }
  }
  p {
    font-size: 40px;
    margin: 10px;
  }
}
.workInfo {
  display: flex;
  #workTypeInfo {
    width: 40%;
    height: 400px;
    margin: 10px 20px;
    background-color: #fead86;
  }
  #workNumber {
    width: 60%;
    height: 400px;
    margin: 10px 20px;
    background-color: #6994e4;
  }
}
</style>
